前言
Java后端技术点
StringUtils常用API
学习时笔记(Linux)
学习时笔记(Git)
学习时笔记(Docker)
学习时笔记(Vue2+3)
面试宝典
学习时笔记(JavaScript)
1.JS基础：语法+流程控制
2.JS基础：数组+函数+对象
3.Web APIS：Dom获取+属性操作
4.Web APIS：Dom事件基础+进阶
5.Web APIS：DOM节点+移动端滑动
6.Web APIS：BOM操作+正则+阶段案例
7.JS进阶：作用域+解构+箭头函数
8.JS进阶：构造函数+数据常用函数+深入面向对象
9.JS进阶：高阶特性
10.ES6（上）
11.ES6（下)-ES9
12.ES10-ES13
学习时笔记(JavaWeb)
学习时笔记(Java)
学习时笔记(Python)
1.日期对象
实例化
- 获取当前事件
const date = new Date()- 获取指定时间
const date = new Date("2001-03-02")日期对象方法
- 案例
<style>
div{
width: 400px;
height: 40px;
border: 2px solid black;
line-height: 40px;
text-align: center;
}
</style>
<body>
<div>
</div>
<script>
const div = document.querySelector("div")
function getDate(){
const date = new Date()
let hour = date.getHours()
let minute = date.getMinutes()
let second = date.getSeconds()
hour = hour < 10 ? "0" + hour : hour
minute = minute < 10 ? "0" + minute : minute
second = second < 10 ? "0" + second : second
return `今天的时间是：${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}号 ${hour}:${minute}:${second}`
}
div.innerHTML = getDate()
setInterval(function(){
div.innerHTML = getDate()
},1000)
</script>
</body>
时间戳
- 使用场景：计算倒计时效果
- 概述：从1970年1月1日至现在的毫秒数
时间戳—获取方式
- getTime
const date = new Date() console.log(date.getTime())- +new Date()
console.log(+new Date())- Date.now()
- 无需实例化，只能获取到当前的时间戳
console.log(Date.now())时间戳——常用计算公式
- day = parseInt(总秒数 / 60 / 60 / 24)
- hour = parseInt(总秒数 / 60 /60 %24)
- minute = parseInt(总秒数 / 60 % 60)
- second = parseInt(总秒数 % 60)
2.节点操作
DOM节点
- DOM数每一个内容都称之为节点
- 元素节点
- 所有的标签 body、div 等等
- 属性节点
- 所有的属性 href src等等
- 文本节点
查找节点
- 父节点查找
子元素.parentNode- 子节点查找
- childNodes：获取所有的子节点，包括文本节点（空格、换行）等
- children：仅获取所有元素节点，返回伪数组
<body> <div class="yeye"> <div class="baba"> <div class="son"></div> </div> </div> <script> const son = document.querySelector(".son") // 返回son上一级节点 baba console.log(son.parentNode) // 返回son的上一级节点 baba的上一级节点yeye console.log(son.parentNode.parentNode) </script> </body>- 兄弟节点查找
下一个兄弟节点 nextElementSibling 上一个兄弟节点 previousElementSibling增加节点
- 创建节点
document.createElement("标签名")- 追加节点
// 插入到父元素的最后 父元素.appendChild(要插入的元素) // 插入到某个子元素的前面 父元素.insertBefore(要插入的元素，在哪个元素前面)<body> <ul> <li>我是老大</li> </ul> <script> const ul = document.querySelector("ul") // 1.创建节点 const li = document.createElement("li") li.innerHTML = "我是li" // 2.追加节点【作为最后一个元素】 ul.append(li) // 3.追加节点【作为第一个元素】 const oneLi = document.createElement("li") oneLi.innerHTML = "我是后加入的老大" ul.insertBefore(oneLi,ul.children[0]) </script> </body>案例
<body>
<!-- 4. box核心内容区域开始 -->
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix">
</ul>
</div>
</div>
<script>
// 1. 重构
let data = [{
src: 'images/course01.png',
title: 'Think PHP 5.0 博客系统实战项目演练',
num: 1125
},
{
src: 'images/course02.png',
title: 'Android 网络动态图片加载实战',
num: 357
},
{
src: 'images/course03.png',
title: 'Angular2 大前端商城实战项目演练',
num: 22250
},
{
src: 'images/course04.png',
title: 'Android APP 实战项目演练',
num: 389
},
{
src: 'images/course05.png',
title: 'UGUI 源码深度分析案例',
num: 124
},
{
src: 'images/course06.png',
title: 'Kami2首页界面切换效果实战演练',
num: 432
},
{
src: 'images/course07.png',
title: 'UNITY 从入门到精通实战案例',
num: 888
},
{
src: 'images/course08.png',
title: 'Cocos 深度学习你不会错过的实战',
num: 590
},
]
// 增加节点li并渲染数据
const ul = document.querySelector(".box-bd ul")
for (let i = 0; i < data.length; i++){
const li = document.createElement("li")
li.innerHTML = `
<a href="#">
<img src=${data[i].src} alt="">
<h4>
${data[i].title}
</h4>
<div class="info">
<span>高级</span> • <span>${data[i].num}</span>人在学习
</div>
</a>
`
ul.appendChild(li)
}
</script>
</body>
增加节点——克隆节点
const 元素名称 = 元素.cloneNode(布尔值)- true：代表克隆时包含后代节点一起克隆
- false：代表克隆时不包含后代节点【默认值】
删除节点
删除元素必须通过父元素删除：父元素.removeChild(元素)
<body> <ul> <li>没用了</li> </ul> <script> const ul = document.querySelector("ul") // 删除节点 ul.removeChild(ul.children[0]) </script> </body>- 注意点
- 如不存在父子关系则删除不成功
- 删除节点和隐藏节点存在区别：隐藏节点标签还存在，删除则是从html中删除节点
- 注意点
3.M端事件
移动端也有自己独特的地方，比如触屏事件
- 常见的触屏事件
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<div></div>
<script>
const div = document.querySelector("div")
div.addEventListener("touchstart",function(){
console.log("触摸事件")
})
div.addEventListener("touchend",function(){
console.log("离开")
})
div.addEventListener("touchmove",function(){
console.log("触摸移动")
})
</script>
</body>
4.JS插件：Swiper
官网
实例演示
- 使用时注意类名区分
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
<style>
.box {
width: 800px;
height: 300px;
margin: 100px auto;
background-color: pink;
}
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
overflow: hidden;
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="box">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<script src="./swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
// 小圆点
pagination: {
el: ".swiper-pagination",
},
// 自动播放
autoplay: {
delay: 1000, //1秒切换一次
disableOnInteraction: false,
},
// 键盘控制
keyboard: {
enabled: true,
onlyInViewport: true,
},
});
</script>
</body>
5.综合案例
<body>
<h1>新增学员</h1>
<form class="info" autocomplete="off">
姓名：<input type="text" class="uname" name="uname" />
年龄：<input type="text" class="age" name="age" />
性别:
<select name="gender" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
薪资：<input type="text" class="salary" name="salary" />
就业城市：<select name="city" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="曹县">曹县</option>
</select>
<button class="add">录入</button>
</form>
<h1>就业榜</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--
<tr>
<td>1001</td>
<td>欧阳霸天</td>
<td>19</td>
<td>男</td>
<td>15000</td>
<td>上海</td>
<td>
<a href="javascript:">删除</a>
</td>
</tr>
-->
</tbody>
</table>
<script>
const uname = document.querySelector(".uname")
const age = document.querySelector(".age")
const gender = document.querySelector(".gender")
const salary = document.querySelector(".salary")
const city = document.querySelector(".city")
// 声明空数组用来存储渲染的数据
const data = []
// 1.录入模块
// 1.1表单提交
const info = document.querySelector(".info")
info.addEventListener("submit", function (e) {
// 阻止提交跳转行为
e.preventDefault()
// 验证非空
if (!(uname.value && age.value && gender.value && salary.value && city.value)) {
return alert("内容不能为空")
}
// 创建对象
const stu = {
stuId: data.length + 1,
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value,
}
data.push(stu)
// 清空表单
info.reset()
// 渲染数据
render()
})
// 渲染函数
const tbody = document.querySelector("tbody")
function render() {
// 清空tbody
tbody.innerHTML = ""
for (let i = 0; i < data.length; i++) {
// 创建节点
const tr = document.createElement("tr")
tr.innerHTML = `
<td>${data[i].stuId}</td>
<td>${data[i].uname}</td>
<td>${data[i].age}</td>
<td>${data[i].gender}</td>
<td>${data[i].salary}</td>
<td>${data[i].city}</td>
<td>
<a href="javascript:">删除</a>
</td>
`
// 添加节点
tbody.appendChild(tr)
}
}
// 删除
tbody.addEventListener("click", function (e) {
if (e.target.tagName = "A") {
this.removeChild(e.target.parentNode.parentNode)
}
})
</script>
</body>